<template>
  <div class="register">
    <van-nav-bar
      left-text="返回"
      right-text="..."
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="title">注册页</div>
    <div class="block">
      <input type="text" v-model="formData.phone" placeholder="输入手机号">
    </div>
    <div class="block">
      <input type="password" v-model="formData.pass" placeholder="输入密码">
    </div>
    <div class="block">
      <input type="password" v-model="formData.checkpass" placeholder="输入确认密码 ">
    </div>
    <div class="block">
      <input type="button" value="注册" @click="register">
    </div>
  </div>
</template>

<script>
// 导入封装的请求函数
import {user_register} from '../utils/api'
import { Toast } from 'vant';

export default {
  data(){
    return {
      formData:{
        phone:'',
        pass:'',
        checkpass:''
      }
    }
  },
  methods:{
    // 点击时先对输入的内容进行判断如果都符号再去发请求
    register(){
      // 先对输入的手机号通过正则进行判断，如果不符合则弹出弹框
      if(/^1[3-9]\d{9}$/.test(this.formData.phone) == false){
        Toast.fail({ message: '请输入合法的手机号' });
        // 对密码和确认密码进行判断是否为空为空就提示
      }else if( !this.formData.pass || !this.formData.checkpass ){
        Toast.fail({ message: '请输入密码/确认密码' });
      }else{//验证通过
        Toast.fail({ message: '密码和确认密码不一致' });
        // 因为注册请求时要传账号和密码，formData中多了一个确认密码需要将多的内容删掉

        // 深拷贝formData，防止对原数据进行修改
        var newFormData = JSON.parse(JSON.stringify(this.formData));
        // 删除对象的checkpass属性
        delete newFormData.checkpass;

        // 发起注册请求，账号phone，密码pass必须传
        user_register(newFormData).then((res)=>{
          if(res.data.code == 200){//注册成功
            Toast.success('注册成功!')
            // 跳转到登录页
            this.$router.push('/login');
          }else{
            Toast.fail('注册失败!')
          }
        })
        
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.register{
  margin: 50px 20px;
}
.register .title{
  font-weight: bold;
  text-align: center;
  line-height: 40px;
}
.register .block{
  margin: 20px 0;
}
.register .block input{
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding-left: 20px;
  box-sizing: border-box;
  outline: none;
  width: 100%;
}
</style>